<!--
 * @Author: LiZhiWei
 * @Date: 2025-01-02
 * @Description: Scaffold 搜索头部组件 - 提取搜索表单和右侧按钮区域的公共部分
-->
<template>
  <div :class="containerClass">
    <SearchFormer
      ref="searchBoxRef"
      :data="searchFormer.data"
      :fields="searchFormer.fields"
      @on-confirm="$emit('on-search', $event)"
      @on-reset="$emit('on-reset', $event)"
    />
    <div>
      <slot name="right-buttons" />
    </div>
  </div>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'SearchHeader',
  })

  const props = withDefaults(
    defineProps<{
      searchFormer: {
        data: object
        fields: any[]
      }
      containerClass?: string
    }>(),
    {
      containerClass: 'flex-y-center justify-between mt-20px mx-20px',
    }
  )

  const searchBoxRef = ref()

  defineEmits<{
    (e: 'on-search', data: object): void
    (e: 'on-reset', data: object): void
  }>()

  const getSearchFormData = () => searchBoxRef.value?.getFormData()

  defineExpose({
    getSearchFormData,
  })
</script>
